<template>
  <div class="apidetail" ref="apidetail">
    <div class="content" ref="content">
      <div class="bt">
        <el-button type="primary" icon="el-icon-arrow-left" class="back" @click="back" size="mini">返回列表</el-button>
        <div class="title">{{title}}接口详情</div>
      </div>
      <div class="detail">
        <div class="flex">
          <div>接口名称：</div><div>{{title}}</div>
        </div>
        <div class="flex">
          <div>接口地址：</div><div>{{url}}</div>
        </div>
        <div class="flex">
          <div>传输方式：</div><div v-if="fangshi == 0">get</div><div v-if="fangshi == 1">get</div>
        </div>
        <div class="flex">
          <div>数据类型：</div><div>json</div>
        </div>
        <div class="flex">
          <div>传输参数：</div>
          <div>
            <el-table :data="canshus" border class="canshu">
              <el-table-column label="参数名" width="120">
                <template slot-scope="scope">
                  {{scope.row.name}}
                </template>
              </el-table-column>
              <el-table-column label="类型" width="120">
                <template slot-scope="scope">
                  {{scope.row.type}}
                </template>
              </el-table-column>
              <el-table-column  label="是否可为空" width="120">
                <template slot-scope="scope">
                  {{scope.row.kong}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="flex">
          <div>详细内容：</div><div v-html="content"></div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import E from "wangeditor";
  import axios from "axios";

  export default {
    name: "apilist",
    data(){
      return{
        title:'',
        url:'',
        leibie:"",
        fangshi:'',
        total:0,
        pagesize:20,
        page:1,
        list:"",
        loading:false,
        canshus:[
          {name:'id',kong:'可以',type:'字符串'}
        ],
        content:''
      }
    },
    created() {
      this.getlist()


    },
    mounted() {

      this.$refs.content.style.minHeight = window.innerHeight - 40 +'px';
    },
    methods:{
      back:function(){
        this.$router.push('/apilist')
      },
      godetail:function(id){
        this.$router.push({
          path:'/apiartile',
          query:id
        })
      },
      //翻页
      fanye:function(page){
        this.loading = true
        this.page = page
        this.getlist()
      },
      //获取列表
      getlist:function(){
        var that = this
        axios.get('/api/plan-market/api/getapi?id='+this.$route.query.id)
          .then(response => {
            if(response.data.msg.code == 0){

                that.canshus =  JSON.parse(response.data.data.canshus)
              console.log( that.canshus)
                that.content = response.data.data.content
                that.fangshi = response.data.data.fangshi
                that.leibie = response.data.data.leibie
                that.title = response.data.data.title
                that.url = response.data.data.url
            }else{
              that.$message.error(response.data.msg.info);
            }
          })
      },
    }
  }
</script>

<style scoped lang="scss">
  .apidetail{ width: 100%; background: #EAEAEA; padding: 20px; box-sizing: border-box;
    /deep/ .el-table td, .el-table th{ padding: 5px !important;}
    .content{ width: 1200px; margin: 0px auto; background: #ffffff; border-radius: 3px; box-shadow: 0 0 10px 10px #cccccc; padding-bottom: 20px;  box-sizing: border-box;
      .bt{ font-size: 20px; border-bottom: 1px #EAEAEA solid; padding: 20px; font-weight: bold; font-family: "Microsoft JhengHei"; margin-bottom: 20px; position: relative;
        .back{ position: absolute; left: 20px;}
      }
      .flex{ display: flex; padding: 10px 0;}
      .detail{ padding: 20px 50px; color: #666666;}
      .title{ text-align: center;}

    }
  }
</style>
